<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/firsthop' }">首页</el-breadcrumb-item>
            <!--            <el-breadcrumb-item><a href="/">奖项查询</a></el-breadcrumb-item>-->
            <el-breadcrumb-item>教师列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索区域-->
        <h2>教师列表</h2>
        <el-card>
            <!--搜索区域-->
            <el-row :gutter="20"><!--:gutter="20"是每个栅栏之间的距离--->
                <el-col :span=8><!--每一个栅栏-->
                    <!--clearable可清空文本框-->
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <!--                        <el-select  slot="prepend" placeholder="请选择">-->
                        <!--                            <el-option label="姓名" value="1"></el-option>-->
                        <!--                            <el-option label="邮箱" value="2"></el-option>-->
                        <!--                            <el-option label="电话" value="3"></el-option>-->
                        <!--                            <el-option label="角色" value="4"></el-option>-->
                        <!--                        </el-select>-->
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span=4>
                    <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
                </el-col>
            </el-row>
            <!--显示分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[15, 30, 50, 200]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
            <!--用户表格区域-->
            <!--:data="userlist"是指定用户源-->
            <!--表格区域,border加边框stripe是隔行变色-->
            <el-table  :data="userlist" style="width: 100%" border stripe><!--这里是要添加API接口的-->
                <el-table-column type="index"></el-table-column><!--索引列-->
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="姓名" prop="teacherName"></el-table-column>
                <el-table-column label="学号" prop="teacherNumber"></el-table-column>
                <el-table-column label="学院" prop="college"></el-table-column>
                <!--                <el-table-column label="操作"></el-table-column>-->
            </el-table>

            <!--@size-change="handleSizeChange" 下拉菜单出发这个事件-->
            <!--            @current-change="handleCurrentChange"页码值发生改变触发这个事件-->
            <!--            :current-page="currentPage4" queryInfo里面有pagenum当前展示的是第几页-->
        </el-card>
        <!--添加用户的对话框-->
    </div>

</template>

<script>
    export default {
        name: "user_list",
        data() {
            //验证邮箱的规则
            var checkEmail = (rule, value, cb) => {
                //验证邮箱的正则表达式
                const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
                if (regEmail.test(value)) {
                    return cb()
                }
                cb(new Error('请输入合法的邮箱'))
            }
            var checkMobile = (rule, value, cb) => {
                //验证手机号的正则表达式
                const regMobile = /^1[3456789]\d{9}$/
                if (regMobile.test(value)) {
                    return cb()
                }
                cb(new Error('请输入合法的手机号'))
            }
            return {
                //获取用户列表的参数对象
                queryInfo: {
                    query: '',
                    //当前所在的页数
                    pageNum: 1,
                    //当前每页显示多少条数据
                    pageSize: 15
                },
                userlist: [],
                total: 0,
                addDialogVisible: false,
                setRoleDialogVisible: false,
                addForm: {},//添加用户的表单数据
                addFormRules: {
                    username: [
                        //不知道为啥，下面这行有点问题，怎么输出都输出请输入用户名
                        {required: true, message: '请输入用户名', trigger: 'blur'},//鼠标移开不填的情况
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},//鼠标移开不填的情况
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符之间', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkEmail, trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkMobile, trigger: 'blur'}//上面定义的正则表达式
                    ]
                },//添加表单的验证规则对象
                //控制修改用户对话框的显示与隐藏
                editDialogVisible: false,
                //点修改用户对话框会先要查询用户的信息，这里存查询到的用户信息对象
                editForm: {},
                //修改表单的验证规则对象
                editFormRules: {
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkEmail, trigger: 'blur'}这个是用来写邮箱的，可以会有小问题
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkMobile, trigger: 'blur'}//上面定义的正则表达式
                    ]
                },
                //需要被分配角色的用户信息
                userInfo: {},
                //所有角色的数据列表
                rolesList: {},
                //已选中的角色id值
                selectedRoleId: ''
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            async getUserList() {
                const {data: res} = await this.$http.get('allTeacher', {
                    params: this.queryInfo
                })//发起一个axios请求，返回一个promise对象，用async,await优化
                this.userlist = res.data;
                this.total = res.numbers;//总用户数
            },
            handleSizeChange(newsize) {
                this.queryInfo.pageSize = newsize
                this.getUserList();//重新发起一次数据请求，把监听到的值保存到queryinfo上面

            },
            handleCurrentChange(newpage) {
                this.queryInfo.pageNum = newpage
                this.getUserList();//把监听到的值保存到queryinfo上面
            },
            // 控制用户对话框的显示与隐藏
            async userStateChanged(userinfo) {//用来改变状态按钮改变后台的状态

                //修改一般都用putuid表示用户的id
                const {data: res} = await this.$http.put('users/${userinfo.id}/state/${userinfo.mg_state}')
                if (res.meta.status !== 200) {
                    userinfo.mg_state = !userinfo.mg_state//告诉用户失败保证页面状态没有变化
                    return this.$message.error('更新用户失败')
                }
                this.$message.success('更新用户状态成功！')
            },
            //表单项关闭之后会重置-->
            addDialogClosed() {
                this.$refs.addFormRef.resetFields()
            },
            //点击按钮，添加新用户
            addUser() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) return
                    //可以发起添加用户的网络请求
                    //请求添加是post
                    const {data: res} = await this.$http.post('addUser', this.addForm)
                    this.$message.success('添加用户成功！')
                    //隐藏用户
                    this.addDialogVisible = false
                    this.getUserList()
                })
            },
            async showEditDialog(id) {
                const {data: res} = await this.$http.get("getUpdate?id="+id)
                this.editForm = res//存进editForm这个表单数据对象上
                this.editDialogVisible = true
            },
            //这是监听修改用户对话框的关闭时间
            editDialogClosed() {
                this.$refs.editFormRef.resetFields()//让提示的请输入合法的手机号等重置
            },
            //修改用户信息并提交
            editUserInfo() {
                this.$refs.editFormRef.validate(async valid => {
                    // console.log(valid);//editFormRef是引用对象，valid为true表示预校验通过，false表示不通过
                    if (!valid) return
                    //发起修改用户信息的数据请求
                    const {data:res} = await this.$http.put("editUser",this.editForm);
                    if (res !== "success") return this.$message.error("操作失败！！！");
                    this.$message.success("操作成功！！！");
                    //隐藏
                    this.editDialogVisible = false;
                    this.getUserList();
                });
            },
            //这是根据id删除用户的信息
            async removeUserById(id) {
                const res = await this.$confirm('此操作将永久删除该用户，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)//捕获错误
                // console.log("如果用户点击确定，删除,返回一个文本，字符串confirm，如果用户取消了删除，则返回值为字符串console");
                // console.log(res);
                if (res !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const {data: res2} = await this.$http.delete("deleteUser?id=" + id)
                this.$message.success('删除用户成功')
                this.getUserList()//重新获取用户列表
            },
            //展示分配角色的对话框
            async setRole(userInfo) {
                this.userInfo = userInfo

                //在展示对话框之前，获取所有角色的列表
                const {data: res} = await this.$http.get('roles')
                if (res.meta.status !== 200) {
                    return this.$message.error('获取角色列表失败')
                }
                this.rolesList = res.data
                this.setRoleDialogVisible = true
            },
            //点击按钮，分配角色
            async saveRoleInfo() {
                if (!this.selectedRoleId) {
                    return this.$message.error('请选择要分配的角色！')
                }

                const {data: res} = await this.$http.put(
                    `users/${this.userInfo.id}/role`,
                    {
                        rid: this.selectedRoleId
                    }
                )

                if (res.meta.status !== 200) {
                    return this.$message.error('更新角色失败！')
                }
            },
            //监听分配角色对话框的关闭事件
            setRoleDialogClosed(){
                this.selectedRoleId='',
                    this.userInfo=''
            }
        }
    }

</script>

<style scoped>

</style>
